<template>
    <div>
      <h2>展示角色</h2>
      <table>
        <tr>
          <td>角色id</td>
          <td>角色名称</td>
          <td>操作</td>
        </tr>
        <tr v-for="i in roles" :key="i.id">
          <td>{{i.id}}</td>
          <td>{{i.name}}</td>
          <td>
            <button @click="del(i.id)">删除</button>
          </td>
        </tr>
      </table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
          roles:[]
        }
    },
    methods: {
      del(id){
        axios.delete('http://127.0.0.1:8000/user/delete/?id='+id).then(res=>{
          console.log(res.data)
          alert(res.data.msg)
        })
      }
    },
    created() {
      axios.get('http://127.0.0.1:8000/user/role/').then(res=>{
        this.roles=res.data
      })
    }
}
</script>

<style scoped>
table{
  margin: 0 auto;
  border: 1px solid black;
  width: 200px;
}
tr,td{
  border: 1px solid black;
  height: 30px;
}

</style>
